:root {
    --primary: #1e88e5;   /* Biru sekolah */
    --secondary: #2e7d32; /* Hijau aksen */
    --bg-light: #f5f7fa;
    --text-main: #1f2937;
}
        html,
        body {
            height: 100%;
            margin: 0;
        }

        .bg-left {
            position: relative;
            /* background-image: url("<?= base_url('assets/img/bginfo.png') ?>"); */
            background-image: url('../img/bginfo.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            overflow: hidden;
        }

        /* Layer blur di atas background */
        .bg-left::before {
            content: "";
            position: absolute;
            inset: 0;
            background: inherit;
            filter: blur(2px);
            /* UBAH ANGKA INI: 4px, 6px, 8px, dst */
            transform: scale(1.05);
            /* Biar pinggir blur gak kepotong */
            z-index: 1;
        }

        /* Layer gelap tipis biar teks makin kebaca */
        .bg-left::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(to right,
                    rgba(0, 0, 0, 0.55),
                    rgba(0, 0, 0, 0.35),
                    rgba(0, 0, 0, 0.2));
            z-index: 2;
        }

        /* Konten di atas blur */
        .bg-left .content-left {
            position: relative;
            z-index: 3;
        }

        .content-left h2 {
            font-family: 'Poppins', sans-serif;
            font-weight: 700;
            letter-spacing: 0.5px;
            text-shadow: 0 2px 8px rgba(0,0,0,0.5);
            margin-top: 10px;
            font-size: 24px !important;
            -webkit-text-stroke: 1px black;
        }

        .content-left h3 {
            font-family: 'Poppins', sans-serif;
            font-weight: 700;
            letter-spacing: 0.5px;
            text-shadow: 0 2px 8px rgba(0,0,0,0.5);
            margin-top: -10px;
            color: #ffffff;
            font-size: 25px !important;
            -webkit-text-stroke: 1px black;
        }

        .content-left h4 {
            font-family: 'Poppins', sans-serif;
            color: #ffffff;
            font-size: 24px !important;
            -webkit-text-stroke: 1px #E6AE30;  /* outline kuning */
            font-weight: 700;
        }

        .content-left p {
            line-height: 1.5;
            /* text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); */
            color: #E5E7EB;
            font-weight: 700;
            font-size: 24px !important;
            -webkit-text-stroke: 1px black;
            margin-top: -10px;
            font-family: 'Poppins', sans-serif;
            font-weight: 700;
        }

        .bg-right {
            /* background-image: url("<?= base_url('assets/img/bglogin.png') ?>"); */
            background-image: url('../img/bglogin.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        /* Biar form kebaca di atas gambar */
        .overlay {
            background: rgba(255, 255, 255, 0.85);
            padding: 2rem;
            border-radius: 10px;
            width: 100%;
            max-width: 400px;
        }

        .overlay-dark {
            background: rgba(0, 0, 0, 0.5);
            color: #fff;
            padding: 3rem;
            border-radius: 12px;
        }

        .overlay-right {
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        }
  
/* ====== ANIMATIONS ====== */
@keyframes fadeSlideDown {
    from {
        opacity: 0;
        transform: translateY(-50px); /* dari ATAS */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeSlideLeft {
    from {
        opacity: 0;
        transform: translateX(50px); /* dari KANAN */
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px); /* mulai dari BAWAH */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInOnly {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Terapkan ke teks */
.animate-fade {
    animation: fadeInOnly 5.0s ease-out both;
}

/* Terapkan ke teks */
.animate-card {
    animation: fadeSlideDown 1.0s ease-out both;
}

.animate-text {
    animation: fadeSlideDown 1.0s ease-out both;
}

.animate-text2 {
    animation: fadeSlideLeft 2.0s ease-out both;
}

.animate-card.delay-1 {
    animation-delay: 0.8s;
}

.animate-text2.delay-2 {
    animation-delay: 0.6s;
}

.animate-text3 {
    animation: fadeSlideUp 0.8s ease-out both;
}

.animate-text3.delay-3 {
    animation-delay: 1.5s;
}

.animate-fade.delay-4 {
    animation-delay: 2s;
}


/* hitungmundur */
/* COUNTDOWN */

.countdown-wrapper{
    max-width:500px;
    margin:auto;
}

.countdown-wrapper h2{
font-size: 18px !important ;
margin-top: 10px;
}

.countdown-box{
    display:flex;
    justify-content:center;
    gap:12px;
}

.time-box{
    background:rgba(0,0,0,0.35);
    backdrop-filter: blur(5px);
    padding:8px 15px;
    border-radius:8px;
    min-width:50px;
}

.time-box span{
    display:block;
    font-size:22px;
    font-weight:700;
    font-family:'Orbitron', sans-serif;
}

.time-box small{
    font-size:12px;
}

/* WARNA */

.hari{
    border-bottom:3px solid #ffc107;
}

.jam{
    border-bottom:3px solid #17a2b8;
}

.menit{
    border-bottom:3px solid #28a745;
}

.detik{
    border-bottom:3px solid #dc3545;
}

/* ANIMASI ANGKA */

.time-box span{
    animation: pulse 1s infinite alternate;
}

@keyframes pulse{
    from{
        transform:scale(1);
    }
    to{
        transform:scale(1.1);
    }
}

/* PROGRESS BAR */

.countdown-progress{
    height:10px;
    border-radius:10px;
}

.pengumuman-box{
    background: rgba(0,0,0,0.45);
    padding:20px;
    border-radius:12px;
    text-align:center;
    backdrop-filter: blur(6px);
    border:1px solid rgba(255,255,255,0.2);
    box-shadow:0 4px 15px rgba(0,0,0,0.3);
}

.pengumuman-box p {
     font-size:18px !important;
}
.pengumuman-box h3 {
     font-size:20px !important;
}

.pengumuman-box h2 {
    font-size: 20px !important;
    margin-bottom: 10px;
}


/* form sebelah kanan */
.card-primary{
    min-height:500px;
}


/* Responsive */

/* Tablet */
@media (max-width: 992px) {
    .title br {
        display: none !important;
    }
}

/* HP */
@media (max-width: 576px) {
    .content-left h2 {
          font-size: 20px !important;
        }

    .content-left h3 {
            font-size: 16px !important;
        }

    .content-left p {
        font-size: 18px !important;
        margin-top:-5 px;
        }

    .title br {
        display: none !important;
    }

    .pengumuman-box h2 {
        font-size: 15px !important;
    }
    
}